import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/vue3',
    name: '/vue',
    component: () => import("@/components/01hello-vue3/base-component.vue"),
    children: [
      {
        path: "hello-setup",
        name: "hello-setup",
        component: () => import("@/components/01hello-vue3/hello-setup.vue"),
      },
      {
        path: "hello-ref",
        name: "hello-ref",
        component: () => import("@/components/01hello-vue3/hello-ref.vue"),
      },
      {
        path: "hello-reactive",
        name: "hello-reactive",
        component: () => import("@/components/01hello-vue3/hello-reactive.vue"),
      },
      {
        path: "list-load",
        name: "list-load",
        component: () => import("@/components/01hello-vue3/list-load.vue"),
      },
      {
        path: "hello-toref",
        name: "hello-toref",
        component: () => import("@/components/01hello-vue3/hello-toref.vue"),
      },
      {
        path: "hello-torefs",
        name: "hello-torefs",
        component: () => import("@/components/01hello-vue3/hello-torefs.vue"),
      },
      {
        path: "hello-computed",
        name: "hello-computed",
        component: () => import("@/components/01hello-vue3/hello-computed.vue"),
      },
      {
        path: "get-dom",
        name: "get-dom",
        component: () => import("@/components/01hello-vue3/get-dom.vue"),
      },
      {
        path: "hello-watch",
        name: "hello-watch",
        component: () => import("@/components/01hello-vue3/hello-watch.vue"),
      },
      // 以下是02components相关
      {
        path: "hello-component",
        name: "hello-component",
        component: () => import("@/components/02components/parent-component.vue"),
      },
      {
        path: "sub-to-parent",
        name: "sub-to-parent",
        component: () => import("@/components/02components/get-from-sub.vue"),
      },
      {
        path: "life-hook",
        name: "life-hook",
        component: () => import("@/components/02components/life-hook.vue"),
      },
      {
        path: "hello-setup2",
        name: "hello-setup2",
        component: () => import("@/components/03setup/hello-setup.vue"),
      },
      {
        path: "hello-store",
        name: "hello-store",
        component: () => import("@/components/03setup/hello-store.vue"),
      },
      {
        path: "hello-router/:name/:age",
        name: "hello-router",
        component: () => import("@/components/03setup/hello-router.vue"),
        // props: route => ({params: route.params}),
      },
      {
        path: "setup-homework",
        name: "setup-homework",
        component: () => import("@/components/03setup/homework/parent-component.vue"),
      },
      {
        path: "lession1",
        name: "lession1",
        component: () => import("@/components/04review/component-parent.vue"),
      },
      {
        path: "lession2",
        name: "lession2",
        component: () => import("@/components/04review/plant-parent.vue"),
      },
      {
        path: "lession3",
        name: "lession3",
        component: () => import("@/components/04review/hello-keepalive.vue"),
      },
      {
        path: "lession4",
        name: "lession4",
        component: () => import("@/components/04review/router-parent.vue"),
        children: [
          {
            path: "suba",
            name: "lession4-suba",
            component: () => import("@/components/04review/router-suba.vue"),
          },
          {
            path: "subb/:name/:age",
            name: "lession4-subb",
            component: () => import("@/components/04review/router-subb.vue"),
          },
          {
            path: "subc/:name/:age",
            name: "lession4-subc",
            component: () => import("@/components/04review/router-subc.vue"),
            // props: true，将params参数放置到props上
            props: true
          },
          {
            path: "subd/:name/:age",
            name: "lession4-subd",
            component: () => import("@/components/04review/router-subd.vue"),
            // props: 可以传入一个函数，返回的对象会被挂载到props上
            props: routes => ({params: routes.params})
          },
        ]
      },
      {
        path: "lession5",
        name: "lession4-subd",
        component: () => import("@/components/04review/hello-vuex.vue"),
        // props: 可以传入一个函数，返回的对象会被挂载到props上
        props: routes => ({params: routes.params})
      }
    ]
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/vue3"
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
